<template>
    <div style="padding-top:50px">
        <Row>
            <Col :sm="{span:12,offset:6}" :md="{span:14,offset:5}" :lg="{span:10,offset:7}">
                <div style="padding:20px">
                    <el-card>
                        <div slot="header">
                            <h2>加入项目组</h2>
                        </div>
                        <el-form label-position="top" v-model="group" label-width="150px" style="text-align:left">
                        <el-form-item label="项目组名称">
                            <el-input readonly v-model="group.groupName"></el-input>
                        </el-form-item>
                        <el-form-item label="项目组简介">
                            <el-input readonly type="textarea" v-model="group.groupInfo" :autosize="{ minRows: 5 }"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="tips">创建时间：<Time :time="group.createTime"/></div>
                        </el-form-item>
                        </el-form>
                        <div v-if="inviter" style="margin-bottom:30px">
                            <Divider orientation="left">邀请者</Divider>
                            <div style="text-align:left">
                                <el-avatar v-if="inviter.portraitUrl" :src="inviter.portraitUrl" style="float:left"></el-avatar>
                                <el-avatar v-else style="float:left">{{inviter.nickname.substring(0,1)}}</el-avatar>
                                <div style="display: inline-block;margin-left: 10px;margin-top: 12.5px;">
                                <span>{{inviter.nickname}}</span>
                                </div>
                            </div>
                        </div>
                        <div v-if="users.length > 0" style="margin-top:30px;margin-bottom:30px">
                            <Divider orientation="left">成员列表</Divider>
                            <div style="white-space: nowrap;text-align: left;overflow-x: auto;padding: 10px 0;">
                                <div style="display:inline-table" v-for="(item, i) in users" :key="i">
                                    <div style="margin:auto;text-align:center;margin:10px">
                                        <el-avatar style="box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);" v-if="item.userInfo.portraitUrl" :size="100" :src="item.userInfo.portraitUrl"></el-avatar>
                                        <el-avatar style="box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);" v-else :size="100">{{item.userInfo.nickname.substring(0,1)}}</el-avatar>
                                    </div>
                                    <div style="text-align:center;margin-top:5px">
                                        <el-tag size="mini" style="white-space:normal;height:auto;word-break:break-all">{{item.userInfo.nickname}}</el-tag>
                                        <el-tag size="mini" v-if="item.isCreate === 1" type="success">创建者</el-tag>
                                    </div>
                                    <div style="text-align:center;font-size:12px;color:grey;margin-top:5px">
                                        <el-tag size="mini" type="info" style="white-space:normal;height:auto;word-break:break-all">{{item.userInfo.homePublicity}}</el-tag>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="text-align:right">
                            <el-button size="mini" @click="sendGroupAudit">申请加入</el-button>
                        </div>
                    </el-card>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
import ALERT from '../util/alert'
export default {
  name: 'GroupJoin',
  data () {
    return {
      token: this.lseajax.storageJson.get(this.lsedata.tokenName),
      group: {},
      inviter: null,
      users: []
    }
  },
  methods: {
    getGroupJoinData (key) {
      let loading = this.lseutil.loading('正在读取')
      this.lseajax.post(this.lseajax.baseurl + '/users/getGroupJoinData', {
        key: key
      }).then((data) => {
        if (data.code === 200) {
          this.group = data.data.group
          this.inviter = data.data.inviter
          this.users = data.data.users
        } else {
          this.lseutil.msg({
            msg: data.msg
          })
        }
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    // 发送审批记录
    sendGroupAudit () {
      let that = this
      ALERT.install({
        titleCenter: true,
        title: '确认申请',
        msg: '确认申请加入该项目组?',
        confirm: function () {
          let loading = this.lseutil.loading('正在提交')
          this.lseajax.post(this.lseajax.baseurl + '/api/groups/sendGroupAudit', {
            groupId: that.group.id,
            inviter: that.inviter ? that.inviter.usersUid : null
          }).then((data) => {
            if (data.code === 200) {
              this.lseutil.msg({
                msg: data.msg,
                type: 1
              })
            } else {
              this.lseutil.msg({
                msg: data.msg
              })
            }
            loading.close()
          }).catch(res => {
            loading.close()
          })
        }
      })
    },
    timestampToTime (timestamp) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let date = new Date(timestamp)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = date.getDate() + ' '
      let h = date.getHours() + ':'
      let m = date.getMinutes() + ':'
      let s = date.getSeconds()
      return Y + M + D + h + m + s
    }
  },
  created () {
    let key = this.$route.query.key
    if (key === undefined || key === '' || key === null) {
      this.lseutil.alert('请键入项目组分享密钥')
    } else {
    // 判定是否有登录状态
      if (this.token) {
        this.getGroupJoinData(key)
      } else {
        this.lseutil.alert('你当前未登录,请登录后返回此页进行操作', {
          okText: '去登录',
          type: 'info',
          onOk: function () {
            this.lseutil.go('login')
          }
        })
      }
    }
  }
}
</script>

<style scoped>

.tips {
  font-size: 12px;
  color: #999;
}
</style>
